<template>
    <div :class='[$style.tag, {[$style.one] : level == 1, [$style.two] : level == 2, [$style.three] : level == 3}]'><slot></slot></div>
</template>

<script lang='ts' setup>
    defineProps<{
        level : 1 | 2 | 3
    }>()
</script>


<style lang='scss' module>
    .tag{
        display: inline-block;
        width: 60px;
        border-radius: 4px;
        border: 1px soli;
        line-height: 28px;
        text-align: center;
        font-size: 14px;

        &.one{
            background: #FFDFDF;
            border-color: #FF1D1D;
            color: #FF1D1D;
        }

        &.two{
            background: #FFEDE9;
            border-color: #FF8D3D;
            color: #FF8D3D;
        }

        &.three{
            background: #E0EFFC;
            border-color: #006EE6;
            color: #007AFF;
        }
    }
</style>